<template>
    <div class="hotPage">
        <van-tabs animated swipeable v-model="cate_index" ellipsis sticky @change="callback">
            <van-tab v-for="(item, index) in cates" :title="item.name" :key="item.id">
                <lodeMore :loadBottom="loadMore" :loadTop="loadTop" :allLoaded="allLoaded"
                    :ref="'reflodemore' + index">
                    <div :class="isloadTop && !loading  && updateNum ? 'updateTip active':'updateTip'">AE推荐引擎有{{updateNum}}条更新</div>
                    <div class="list">
                        <div v-for="(item, index) in list" :key="'an_item_'+index">
                            <adItem v-if="item.type=='ad'" :data="item.data"></adItem>
                            <articleItem v-else :data="item.data"></articleItem>
                        </div>
                    </div>
                    <div slot="bottom" class="mint-loadmore-bottom">
                        <span v-show="!loading">↓</span>
                        <span v-show="loading">Loading...</span>
                    </div>
                </lodeMore>
            </van-tab>
            <div slot="nav-right" class="mnav-right">

            </div>
        </van-tabs>
        <i class="icon-setting" @click="add" style="height: 44px;"></i>
    </div>
</template>

<style lang="scss" scope>
    .list {
        margin-top: 30px;
    }

    .mnav-right {
        height: 88px;
        width: 70px;
        flex-shrink: 0;
    }

    .hotPage {
        position: relative;
.updateTip{
            background: #81dde9;
            text-align: center;
            line-height: 60px;
            font-size: 24px;
            color: #037eb7;
            height: 0;
            transition: all ease-in-out 0.5s;
            overflow: hidden;
            &.active{
                height: 60px;
                opacity: 1;
            }
        }

        .icon-setting {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 70px;
            height: 88px;
            background-color: #fff;
            background-image: url('/images/gd.png');
            background-repeat: no-repeat;
            background-size: 40px 34px;
            background-position: 8px 24px;
        }
    }
</style>

<script>
    import {
        Tab,
        Tabs
    } from 'vant';
    Vue.use(Tab);
    Vue.use(Tabs);

    import articleItem from '@/compoents/articleItem'
    import adItem from '@/compoents/adItem'
    import lodeMore from '@/compoents/loadmore'
    export default {
        name: "hotPage",
        data() {
            return {
                isloadTop: false,
                cate_index: 0,
                list: [],
                page: 0,
                cates: [],
                loading: false,
                allLoaded: false,
                updateNum: 0
            }
        },
        components: {
            lodeMore,
            adItem,
            articleItem
        },
        mounted() {
            this.getData()
        },
        watch: {
            'cate_index'() {
                console.log("cate_index 变了")

            }
        },
        computed: {
            tag() {
                let item = this.cates[this.cate_index]
                return item ? item.tag : ''
            },
            reflodemore() {
                return 'reflodemore' + this.cate_index;
            }

        },
        methods: {
            loadTop() {
                this.isloadTop = true
                this.loading = true
                this.$store.dispatch('news', {
                    tag: this.tag,
                    page: 1,
                    options: {
                        loading: false
                    }
                }).then(res => {
                    let {
                        ad,
                        news
                    } = res.data
                    this.page = news.current_page
                    let list = [];
                    news.data.forEach(function (v, i) {
                        list.push({
                            type: 'news',
                            data: v
                        })
                    });

                    if (ad && ad.id) {
                        list.push({
                            type: 'ad',
                            data: ad
                        })
                    }
                    this.updateNum = res.data.update
                    this.list = list
                    this.loading = false
                    this.$refs[this.reflodemore][0].onTopLoaded();
                    setTimeout(()=>{
                        this.isloadTop = false
                    }, 1000)
                }).catch(e => {
                    this.loading = false
                    setTimeout(()=>{
                        this.isloadTop = false
                    }, 1000)
                    this.$refs[this.reflodemore][0].onTopLoaded();
                })
            },
            getData() {
                this.$store.dispatch('getNav', {}).then(res => {
                    let cates = res.data;
                    this.cates = cates;
                    let slideData = [];
                    let slideId = [];
                    let cate_id;
                    let that = this;
                    this.getItems();
                })
            },

            getItems() {
                let list = this.list
                let page = this.page
                if (this.allLoaded) return false
                this.loading = true
                this.$store.dispatch('news', {
                    tag: this.tag,
                    page: page + 1
                }).then(res => {
                    let {
                        ad,
                        news
                    } = res.data
                    this.page = news.current_page
                    news.data.forEach(function (v, i) {
                        list.push({
                            type: 'news',
                            data: v
                        })
                    })
                    if (news.data.length < news.per_page) {
                        this.allLoaded = true
                    }
                    if (ad && ad.id) {
                        list.push({
                            type: 'ad',
                            data: ad
                        })
                    }
                    this.list = list
                    this.loading = false
                    this.$refs[this.reflodemore][0].onBottomLoaded()
                }).catch(e => {
                    console.log("Error", e)
                    this.loading = false
                    this.$refs[this.reflodemore][0].onBottomLoaded()
                })
            },
            add(e) {
                this.$router.push({
                    path: '/m/additem'
                })
            },
            callback(index, title) {
                this.page = 0
                this.list = []
                this.allLoaded = false
                let item = this.cates[this.cate_index];
                if (item.type == 1) {
                    window.open(item.href)
                    return false
                }
                this.getItems();
            },
            loadMore() {
                this.getItems()
            }
        },
    }
</script>